<template>
    <view class='page'>
        <text class="status">
            {{selectDictLabel(stateList,data.orders_state)}}
        </text>
        <view class="content box" v-if="data">
            <view class="box-t b">
                <view class="boxl">
                    <view class="box1">
                        <text class="p" v-if="data.lists">{{data.movie_film_name}}({{data.lists.length}}张)</text>
                    </view>
                    <view class="box2">
                        <view class="item">
                            <text>{{ data.movie_show_date }} {{getTime(data.movie_show_time)}}</text>
                            <text>{{ data.movie_cinema_name }}</text>
                            <text>{{ data.movie_hall_name }}</text>
                        </view>
                    </view>
                    <view class="box2">
                        <view class="item" v-for="item,index in data.lists" :key="index">
                            <!-- <text>1号厅</text> -->
                            <text>{{item.seat_name}}</text>
                        </view>
                    </view>
                </view>
                <view class="boxr">
                    <image v-if="data.movie_film_pic" :src="data.movie_film_pic" mode="heightFix"></image>
                </view>
            </view>
            <view class="fg">
                <view class="circle left"></view>
                <view class="line"></view>
                <view class="circle right"></view>
            </view>
            <view class="address b">
                <view class="txt">
                    <text class="p">{{data.movie_cinema_name}}</text>
                    <text class="p1">{{data.movie_cinema_address}}</text>
                </view>
                <view class="pic" @click="handleNav">
                    <!-- <image :src="$imgUrl+'movie/address.png'"></image> -->
                    <image :src="$imgUrl+'images/moivew-location.png'"></image>
                </view>
            </view>
            <view class="pay-info b">
                <view class="t">
                    <text class="p">实付金额：￥{{data.pay_total_price}}</text>
                </view>
                <view class="item">
                    <text>订单号：{{ data.order_no }}</text>
                    <text class="btn" @tap="copy()">复制</text>
                </view>
                <view class="item">
                    <text>下单时间：{{data.pay_success_time}}</text>
                </view>
                <view class="item">
                    <text>总金额：{{data.pay_total_price}}元</text>
                </view>
            </view>
            <view class="xz b">
                <text class="p">观影须知</text>
                <view class="txt">
                    <view class="p2">
                        <text>1.付款后系统预计在10-60分钟内出票 (节假日、凌晨出票可能延迟)，支付成功后<text class="red">不能退票或改签。</text></text>
                    </view>
                    <view class="p2">
                        <text class="red">2.代购影票服务是由平台入驻商家第一方代为购买特价票，支付费用为代购影票的服务费并非影票价格代购成功即服务完成，因此影影院一经出售除影影院原因不能观影影外无法退票。</text>
                    </view>
                    <view class="p2">
                        <text>3.儿童免票或身高问题请联系影城咨询，如未与影城确认，购票后<text class="red">不能退票及改签。</text></text>
                    </view>
                    <view class="p2">
                        <text>4.如果无法出票，系统会原路退还您支付的票价，不收取任何费用。</text>
                    </view>
                    <view class="p2">
                        <text>5.出票成功后如您下单时订阅通知消息，系统会发送微信消息提醒您，点击即可查看取票二维码在影院内取票机取票。</text>
                    </view>
                    <view class="p2">
                        <text>6.取票码查看方式:点击“我的-全部订单”即可查看取票码，凭借取票二维码至影城取票机取票即可。</text>
                    </view>
                </view>
            </view>
            <view class="kf b">
                <text>联系客服</text>
                <text class="iconfont icon-more more"></text>
            </view>
        </view>
    </view>
</template>
<script>
import { getOrderInfo } from "@/api/movie.js"
import { movieState } from "@/api/dictionary.js"
import config from "@/utils/config.js"
export default {
    name: '',
    components: {

    },
    data() {
        return {
            $imgUrl: this.$imgUrl,
            order_no: '',
            data: {},
            stateList: movieState, //订单状态 -2:已关闭 -1:已取消 0:待付款 1:待出票 2:已出票 3:已完成
        }
    },

    onLoad(params) {
        if (params) {
            this.order_no = params.order_no
            this.getList()
        }
    },
    methods: {
        getList() {
            getOrderInfo({ order_no: this.order_no }).then(res => {
                this.data = res.data
                console.log(res.data, 111111)
            })
        },
        // 复制
        copy() {
            uni.setClipboardData({
                data: this.data.order_no,
                success: () => { }
            });
        },
        getTime(time) {
            return config.formattedDate(time)
        },
        handleNav() {
            // uni.openLocation({
            //     latitude: Number(this.cinemaInfo.latitude), // 纬度
            //     longitude: Number(this.cinemaInfo.longitude), // 经度
            //     name: this.cinemaInfo.cinemaName,
            //     address: this.cinemaInfo.address,
            //     scale: 15, 
            // })
        }
    },
}

</script>
<style scoped lang='scss'>
.page {
  background-color: #f03d37;
  padding-bottom: 40rpx;

  .status {
    color: #ffffff;
    font-size: 38rpx;
    font-weight: 600;
    display: block;
    text-align: center;
    padding: 76rpx 0 62rpx;
  }
  .content {
    overflow: hidden;
    padding: 30rpx 0;
    background-color: #fff;
    border-radius: 8rpx;
    .p {
      font-size: 36rpx;
      font-weight: 600;
    }
    .b {
      width: 620rpx;
      margin: 0 auto;
    }
    .box-t {
      display: flex;
      justify-content: space-between;
      .boxl {
        width: 66%;
        .box2 {
          display: flex;
          flex-wrap: wrap;
          .item {
            margin-right: 10rpx;
            text {
              padding-top: 10rpx;
              display: block;
              font-size: 28rpx;
              font-weight: 600;
            }
          }
        }
      }
      .boxr {
        width: 200rpx;
        height: 280rpx;
        border-radius: 10rpx;
        overflow: hidden;
        image {
          height: 280rpx;
        }
      }
    }
    .fg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      .circle {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        background-color: #f03d37;
        &.left {
          margin-left: -14rpx;
        }
        &.right {
          margin-right: -14rpx;
        }
      }
      .line {
        width: 620rpx;
        height: 0;
        border-bottom: 2rpx dashed #cccccc;
      }
    }
    .address {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 48rpx 0 60rpx;
      border-bottom: 2rpx dashed #cccccc;
      .txt {
        text {
          display: block;
        }
        .p {
          padding-bottom: 10rpx;
        }
        .p1 {
          font-size: 28rpx;
          color: #999999;
        }
      }
      .pic {
        width: 88rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 2rpx solid #cccccc;
        image {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
    .pay-info {
      padding: 40rpx 0;
      border-bottom: 2rpx dashed #cccccc;
      .t {
        padding-bottom: 10rpx;
      }
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10rpx;
        text {
          color: #555555;
          font-size: 28rpx;
        }
        .btn {
          padding: 6rpx 20rpx;
          color: #f1a532;
          border: 2rpx solid #f1a532;
          font-size: 24rpx;
          border-radius: 50rpx;
          margin-left: 40rpx;
        }
      }
    }
    .xz {
      padding: 40rpx 0;
      border-bottom: 2rpx dashed #cccccc;
      .txt {
        padding-top: 20rpx;
        .p2 {
          padding-bottom: 10rpx;
          text {
            font-size: 28rpx;
            color: #555555;
          }
          .red {
            color: #e54d42;
          }
        }
      }
    }
    .kf {
      padding-top: 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text {
        font-size: 36rpx;
      }
      .more {
        font-size: 28rpx;
        color: #6a6474;
      }
    }
  }
}
</style>